<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!--demo.css是格式化CSS文件-->
    <link rel="stylesheet" href="css/demo.css"/>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="Carousecss/style.css">
    <link rel="stylesheet" href="css/index2.css?v=11"/>


</head>

<body>
<div id="header" class="top-title">
    <div class="header-left">
        <ul type="none" class="ulA">
            <li style="display:inline" class="liA">
                <a href="javascript:" class="aa" style="text-decoration: none;">下载APP</a>
            </li>
            <li style="display:inline" class="liA">

                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>

            </li>
            <li class="liA">
                <a href="javascript:" class="aa" style="text-decoration: none;">茂名</a>
            </li>
            <li class="liA">
                <a href="javascript:" class="aa" style="text-decoration: none;">多云</a>
            </li>
            <li class="liA">
                <a href="javascript:" class="aa" style="text-decoration: none;">14°-16°</a>
            </li>
        </ul>
    </div>
    <div class="header-right">
        <ul type="none" class="ulB">
            <li style="display:inline" class="liB">
                <a href="javascript:" class="aa" style="text-decoration: none;">更多</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="javascript:" class="aa" style="text-decoration: none;">反馈</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="javascript:" class="aa" style="text-decoration: none;">图虫</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="javascript:" class="aa" style="text-decoration: none;">头条号</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB">
                <a href="javascript:" class="aa" style="text-decoration: none;">问答</a>
            </li>
            <li style="display:inline" class="liB">
                <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
            </li>
            <li class="liB"
                style="margin-left: 10px;width: 60px;height: 34px;background-color:red;text-align: center">
                <a href="javascript:" class="aa" style="text-decoration: none;">登陆</a>
            </li>
        </ul>
    </div>
</div>

<div id="index-ajax" class="index-ajax">
    <div id="left">
        <div class="y-left"  id="divId">
            <div  class="wchannel ">
                <div class="wchanne-layer">
                    <a class="logo" href="/"> <img src="http://www.xmt.com/images/Logo/index.png">
                    </a>
                    <br>
                    <ul id="aaa">
                        <li v-for="( index, item) in menu">
                            <a class="buttonA"
                               name="link" href="javascript:"
                               v-on:click="changeType"  v-if="index < 12" data-id="{{item.id}}" :class="{active: item.id == cate_id}" >{{item.name}}</a>
                        </li>
                        <li><a href="javascript:" onclick="show()" id="more-show">更多</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="wchannel-more-layer">
            <ul class="side_menu">
                <li v-for="( index, item) in menu">
                    <a  class="buttonA"   name="link" href="javascript:" data-id="{{item.id}}" v-if="index>=12">{{ item.name }}</span> </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="y-centre">


        <div class="new-list1">
            <div class="HotNew">
                <div class="HotNewNav">
                    <a class="newtype" href="#">
                        热点新闻
                    </a>
                    <span class="butt"></span>
                </div>


                <div class="Newcontent-left">

                    <ul class="Newcontent-list" >
                        <li class="Newfirst-list" ><i class="dot"></i><a class="newlist-main" href="#">{{biglist1[0].title }}</a></li>
                        <li class="Newfirst-list2" >
                            <a class="newmm" href="#"  >{{biglist1[1].title }}</a>
                            <a class="newmm" href="#" >{{biglist1[2].title }}</a>
                        </li>
                    </ul>
                    <ul class="Newcontent-list" >
                        <li class="Newfirst-list" ><i class="dot"></i><a class="newlist-main" href="#">{{biglist2[0].title }}</a></li>
                        <li class="Newfirst-list2" >
                            <a class="newmm" href="#"  >{{biglist2[1].title }}</a>
                            <a class="newmm" href="#" >{{biglist2[2].title }}</a>
                        </li>
                    </ul>
                    <ul class="Newcontent-list" >
                        <li class="Newfirst-list" ><i class="dot"></i><a class="newlist-main" href="#">{{biglist3[0].title }}</a></li>
                        <li class="Newfirst-list2" >
                            <a class="newmm" href="#"  >{{biglist3[1].title }}</a>
                            <a class="newmm" href="#" >{{biglist3[2].title }}</a>
                        </li>
                    </ul>
                    <ul class="Newcontent-list" >
                        <li class="Newfirst-list" ><i class="dot"></i><a class="newlist-main" href="#">{{biglist4[0].title }}</a></li>
                        <li class="Newfirst-list2" >
                            <a class="newmm" href="#"  >{{biglist4[1].title }}</a>
                            <a class="newmm" href="#" >{{biglist4[2].title }}</a>
                        </li>
                    </ul>

                </div>

                <div class="buttomleft">
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[0].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList1"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>

                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[1].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList2"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[2].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList3"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[2].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList3"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="hotnewright">

                <div id="slider">
                    <ul class="slides clearfix">
                        <li><img class="responsive" src="\images\a1.jpg"></li>
                        <li><img class="responsive" src="\images\a2.jpg"></li>
                        <li><img class="responsive" src="\images\a3.jpg"></li>
                        <li><img class="responsive" src="\images\a4.jpg"></li>

                    </ul>
                    <ul class="controls">
                        <li><img src="images\slider\next.png" alt="previous"></li>
                        <li><img src="\images\slider\prev.png" alt="next"></li>
                    </ul>
                    <ul class="pagination">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="newcontent-right">
                <div class="newcont-left">
                    <div class="cont-title">
                        <i class="tit-img"></i>
                        <span class="tit-main">热点图片</span>
                    </div>


                    <a href="javascript:" class="img1">
                          <span>
                           <img class="tit-img2" :src="military[0].pic" alt=""
                                style="display: block;width: 240px;height: 150px;overflow: hidden; margin-top: 18px;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit1">{{military[0].title}}</span>
                          </span>
                    </a>




                    <div id="BAIDU_SSP__wrapper_u2501375_0">
                        <iframe id="iframeu2501375_0"
                                src="http://pos.baidu.com/hchm?sz=245x320&amp;pdbid=0&amp;orderid=0&amp;odid=0&amp;rtbid=0&amp;rdid=2501375&amp;dc=3&amp;di=u2501375&amp;dri=0&amp;dis=0&amp;dai=11&amp;ps=2993x564&amp;coa=at%3D3%26rsi0%3D245%26rsi1%3D320%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D0%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523333%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&amp;dcb=___adblockplus&amp;dtm=HTML_POST&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1488810337017&amp;ti=%E5%A4%B4%E6%9D%A1%E6%96%B0%E9%97%BB_%E4%B8%9C%E6%96%B9%E5%A4%B4%E6%9D%A1&amp;ari=2&amp;dbv=2&amp;drs=1&amp;pcs=1287x925&amp;pss=1287x3333&amp;cfv=0&amp;cpl=4&amp;chi=1&amp;cce=true&amp;cec=UTF-8&amp;tlm=1488809343&amp;rw=925&amp;ltu=http%3A%2F%2Fmini.eastday.com%2F&amp;ecd=1&amp;uc=1920x1040&amp;pis=-1x-1&amp;ccd=24&amp;cja=false&amp;cmi=5&amp;col=zh-CN&amp;cdo=-1&amp;sr=1920x1080&amp;tcn=1488810339&amp;qn=7d62cac6105a5502&amp;tt=1488810336967.1883.1911.1912"
                                width="245" height="320" align="center,center" vspace="0" hspace="0" marginwidth="0"
                                marginheight="0" scrolling="no" frameborder="0"
                                style="border:0;vertical-align:bottom;margin:0;width:245px;height:320px"
                                allowtransparency="true">
                        </iframe>
                    </div>


                </div>

                <div class="newcont-right">
                    <div class="cont-title">
                        <i class="tit-right-img"></i>
                        <span class="tit-main4"></span>
                    </div>
                    <div class="RightImg1">



                        <ul class="ListNew" style="list-style: none;">
                            <li class="ListNewLi" v-for="military in military" v-if="military.id>0">
                                <a href="javascript:" class="ListNewA">
                                    <img :src="military.pic" alt="" class="ListNewImg">
                                </a>
                                <div class="txt">
                                    <p class="topic"><a href="javascript:">{{ military.title }}</a></p>
                                    <p class="from mt5">{{ military.from }}</p>
                                    <p class="time">{{ military.time }}</p>
                                </div>
                            </li>
                        </ul>




                    </div>
                </div>
            </div>




        </div>








        <!--*************1**********-->
        <div class="new-type1">

            <div class="new-list5">
                <div class="list-title">
                    <a>
                        <a class="type">国际</a>
                        <em class="type1">world</em>
                    </a>
                    <a href="javascript:">
                        <div class="more">更多
                            <i class="i">+</i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list-content">
                <div class="content-left">
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{worldtitle[0].title}}</a>
                        </li>
                        <li class="next" v-for="list in worldlist1"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>

                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{worldtitle[1].title}}</a>
                        </li>
                        <li class="next" v-for="list in worldlist2"><i class="dot-sm"></i><a class="list-next"
                                                                                             href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                </div>

                <div class="content-right">
                    <div class="cont-left">
                        <div class="cont-title">
                            <i class="tit-img"></i>
                            <span class="tit-main">国际图片</span>
                        </div>
                        <div v-for="worldlist3 in worldlist3">
                            <a href="javascript:" class="img1" v-if="worldlist3.id==0">
                          <span>
                           <img class="tit-img2" :src="worldlist3.pic" alt=""
                                style="display: block;width: 240px;height: 150px;overflow: hidden; margin-top: 18px;"
                           >
                              <span class="tit1">{{worldlist3.title}}</span>
                          </span>
                            </a>
                            <a href="javascript:" class="img2" v-if="worldlist3.id==1">
                        <span>
                           <img class="tit-img3" :src="worldlist3.pic" alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                           >
                              <span class="tit2">{{worldlist3.title}}</span>
                          </span>
                            </a>
                            <a href="javascript:" class="img3" v-if="worldlist3.id==2">
                        <span>
                           <img class="tit-img3" :src="worldlist3.pic" alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                           >
                              <span class="tit2">{{worldlist3.title}}</span>
                          </span>
                            </a>
                        </div>
                    </div>

                    <div class="cont-right">
                        <div class="cont-title">
                            <i class="tit-right-img"></i>
                            <span class="tit-main2"></span>
                        </div>
                        <ul class="cont-main">
                            <li v-for="( index, list) in worldlist4"><a href="javascript:"><i
                                    class="i{{index}}"></i>{{list.title}}</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


        <!--*************2**********-->
        <div class="new-type2">

            <div class="new-list6">
                <div class="list-title">
                    <a>
                        <a class="type">社会</a>
                        <em class="type1">SOCIETY</em>
                    </a>
                    <a href="javascript:">
                        <div class="more">更多
                            <i class="i">+</i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list-content">
                <div class="content-left">
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[0].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList1"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>

                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[1].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList2"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[2].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList3"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                </div>


                <div class="content-right">
                    <div class="cont-left">
                        <div class="cont-title">
                            <i class="tit-img"></i>
                            <span class="tit-main">社会图片</span>
                        </div>

                        <div v-for="SocietyList4 in SocietyList4">

                            <a href="javascript:" class="img1" v-if="SocietyList4.id==0">
                          <span>
                           <img class="tit-img2" :src="SocietyList4.pic " alt=""
                                style="display: block;width: 240px;height: 150px;overflow: hidden; margin-top: 18px;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit1">{{ SocietyList4.title}}</span>
                          </span>
                            </a>
                            <a href="javascript:" class="img2" v-if="SocietyList4.id==1">
                        <span>
                           <img class="tit-img3" :src="SocietyList4.pic " alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit2">{{ SocietyList4.title}}</span>
                          </span>
                            </a>
                            <a href="javascript:" class="img3" v-if="SocietyList4.id==2">
                        <span>
                           <img class="tit-img3" :src=" SocietyList4.pic" alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit2">{{SocietyList4.title }}</span>
                          </span>
                            </a>

                            <a href="javascript:" class="img2" v-if="SocietyList4.id==3">
                        <span>
                           <img class="tit-img3" :src=" SocietyList4.pic" alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit2">{{SocietyList4.title }}</span>
                          </span>
                            </a>
                            <a href="javascript:" class="img3" v-if="SocietyList4.id==4">
                        <span>
                           <img class="tit-img3" :src=" SocietyList4.pic" alt=""
                                style="    display: block;width: 112px;height: 84px; overflow: hidden;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit2">{{ SocietyList4.title}}</span>
                          </span>
                            </a>
                        </div>



                    </div>
                    <div class="cont-right">
                        <div class="cont-title">
                            <i class="tit-right-img"></i>
                            <span class="tit-main3"></span>
                        </div>
                        <div class="RightImg">
                            <div v-for="SocietyList4 in SocietyList4">

                                <a href="javascript:" class="ImgList1"  v-if="SocietyList4.id==5">
                                    <img class="Img-List" :src=" SocietyList4.pic" alt=""
                                         title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                                    <span class="tit3">{{ SocietyList4.title}}</span>
                                    </span>
                                </a>
                                <a href="javascript:" class="ImgList2"  v-if="SocietyList4.id==6">
                                    <img class="Img-List" :src=" SocietyList4.pic" alt=""

                                         title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                                    <span class="tit3">{{ SocietyList4.title}}</span>
                                    </span>
                                </a>
                            </div>




                            <ul class="content-list">
                                <li class="first-list" ><i class="dot"></i><a class="list-main2" href="javascript:">{{SocietyTitle[3].title}}</a></li>

                                <li class="next" v-for="list in SocietyList6"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.title}}</a> </li>

                            </ul>
                            <ul class="content-list">
                                <li class="first-list" ><i class="dot"></i><a class="list-main2" href="javascript:">{{SocietyTitle[4].title}}</a>
                                </li>
                                <li class="next" v-for="list in SocietyList7"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.title}}</a>
                            </ul>





                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--************3***********-->
        <div class="new-type3">

            <div class="new-list7">
                <div class="list-title">
                    <a>
                        <a class="type">军事</a>
                        <em class="type1">MILITARY</em>
                    </a>
                    <a href="javascript:">
                        <div class="more">更多
                            <i class="i">+</i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="list-content">
                <div class="content-left">
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[0].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList1"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>

                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[1].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList2"><i class="dot-sm"></i><a class="list-next"
                                                                                               href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                    <ul class="content-list">
                        <li class="first-list"><i class="dot"></i><a class="list-main" href="javascript:">{{SocietyTitle[3].title}}</a>
                        </li>
                        <li class="next" v-for="list in SocietyList3"><i class="dot-sm"></i><a class="list-next" href="javascript:">{{list.name}}</a>
                        </li>
                    </ul>
                </div>

                <div class="content-right">
                    <div class="cont-left">
                        <div class="cont-title">
                            <i class="tit-img"></i>
                            <span class="tit-main">军事图片</span>
                        </div>


                        <a href="javascript:" class="img1">
                          <span>
                           <img class="tit-img2" :src="military[0].pic" alt=""
                                style="display: block;width: 240px;height: 150px;overflow: hidden; margin-top: 18px;"
                                title="福岛核事故去污费已达2.6万亿日元 或还将膨胀">
                              <span class="tit1">{{military[0].title}}</span>
                          </span>
                        </a>




                        <div id="BAIDU_SSP__wrapper_u2501375_0">
                            <iframe id="iframeu2501375_0"
                                    src="http://pos.baidu.com/hchm?sz=245x320&amp;pdbid=0&amp;orderid=0&amp;odid=0&amp;rtbid=0&amp;rdid=2501375&amp;dc=3&amp;di=u2501375&amp;dri=0&amp;dis=0&amp;dai=11&amp;ps=2993x564&amp;coa=at%3D3%26rsi0%3D245%26rsi1%3D320%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D0%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523333%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&amp;dcb=___adblockplus&amp;dtm=HTML_POST&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr=1488810337017&amp;ti=%E5%A4%B4%E6%9D%A1%E6%96%B0%E9%97%BB_%E4%B8%9C%E6%96%B9%E5%A4%B4%E6%9D%A1&amp;ari=2&amp;dbv=2&amp;drs=1&amp;pcs=1287x925&amp;pss=1287x3333&amp;cfv=0&amp;cpl=4&amp;chi=1&amp;cce=true&amp;cec=UTF-8&amp;tlm=1488809343&amp;rw=925&amp;ltu=http%3A%2F%2Fmini.eastday.com%2F&amp;ecd=1&amp;uc=1920x1040&amp;pis=-1x-1&amp;ccd=24&amp;cja=false&amp;cmi=5&amp;col=zh-CN&amp;cdo=-1&amp;sr=1920x1080&amp;tcn=1488810339&amp;qn=7d62cac6105a5502&amp;tt=1488810336967.1883.1911.1912"
                                    width="245" height="320" align="center,center" vspace="0" hspace="0" marginwidth="0"
                                    marginheight="0" scrolling="no" frameborder="0"
                                    style="border:0;vertical-align:bottom;margin:0;width:245px;height:320px"
                                    allowtransparency="true">
                            </iframe>
                        </div>


                    </div>

                    <div class="cont-right">
                        <div class="cont-title">
                            <i class="tit-right-img"></i>
                            <span class="tit-main4"></span>
                        </div>
                        <div class="RightImg1">



                            <ul class="ListNew" style="list-style: none;">
                                <li class="ListNewLi" v-for="military in military" v-if="military.id>0">
                                    <a href="javascript:" class="ListNewA">
                                        <img :src="military.pic" alt="" class="ListNewImg">
                                    </a>
                                    <div class="txt">
                                        <p class="topic"><a href="javascript:">{{ military.title }}</a></p>
                                        <p class="from mt5">{{ military.from }}</p>
                                        <p class="time">{{ military.time }}</p>
                                    </div>
                                </li>
                            </ul>




                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--******图片*******-->

        <div class="new-type4">

            <div class="new-list3">
                <div class="list-title">
                    <a>
                        <a class="type">图片</a>
                        <em class="type1">IMAGE</em>
                    </a>
                    <a href="javascript:">
                        <div class="more">更多
                            <i class="i">+</i>
                        </div>
                    </a>
                </div>
            </div>

            <div class="piccontent">
                <div class="content-left">
                    <div class="content-list">

                        <img class="aa1" :src="image[0].pic" alt="">

                    </div>
                </div>


                <div class="pic-center">
                    <p class="pp1">
                        <a href="javascript:" class="f1" v-for="img in image" v-if="img.id>0 && img.id<5">
                            <img class="aa2" :src="img.pic" alt="">
                        </a>
                    </p>
                </div>

                <div class="pic-right">
                    <a href="javascript:" class="f2">
                        <img class="aa3" :src="image[5].pic" alt="">
                    </a>
                </div>
            </div>

        </div>


    </div>


    <div id="right"></div>
</div>
</body>
</html>


<script>
    var demo = new Vue({
        el: "#index-ajax",
        data: {


            cate_id: 1,
            banner: [
                { pic:'http://www.xmt.com/images/index/example2/1.jpg',url:'https://hao.360.cn/?wd_xp1'},
                { pic:'http://www.xmt.com/images/index/example2/2.jpg',url:'https://hao.360.cn/?wd_xp1'},
                { pic:'http://www.xmt.com/images/index/example2/3.jpg',url:'https://hao.360.cn/?wd_xp1'},
            ],
            mock: [

                {
                    id: 1,
                    URL: 'https://www.baidu.com/',
                    title: '感动瞬间的八张图片，最后一张总理照片莫名戳中泪点',
                    cover: 'http://www.xmt.com/images/index/NewType1/1.jpg',
                    tag: ['社会'],
                    user: '逻辑思维',
                    Avatar: "http://www.xmt.com/images/index/Avatar/Avatar.jpg",
                    discuss: {name: "评论", URL: "https://www.baidu.com"},
                    cTime: '34分钟前',
                    pic_list: [],
                    show_type: 1,
                },

                {
                    id:1,
                    URL: 'http://www.sina.com.cn/',
                    title: '感动瞬间的八张图片，最后一张总理照片莫名戳中泪点',
                    pic_list: ['http://www.xmt.com/images/index/NewType2/1.jpg', 'http://www.xmt.com/images/index/NewType2/2.jpg', 'http://www.xmt.com/images/index/NewType2/3.jpg', 'http://www.xmt.com/images/index/NewType2/2.jpg',],
                    tag: ['社会'],
                    user: '逻辑思维',
                    Avatar: "http://www.xmt.com/images/index/Avatar/Avatar.jpg",
                    discuss: {name: "评论", URL: "https://www.baidu.com"},
                    cTime: '34分钟前',
                    show_type: 1,

                },


                {
                    id: 1,
                    URL: 'https://www.baidu.com/',
                    a1title: '感动瞬间的八张图片，最后一张总理照片莫名戳中泪点',
                    a2title: '感动瞬间的八张图片，最后一张总理照片莫名戳中泪点感动瞬间的八张图片，最后一张总理照片莫名戳中泪点感动瞬间的八张图片，最后一张总理照片莫名戳中泪点',
                    pic_list: ['http://www.xmt.com/images/index/NewType3/1.jpg'],
                    show_type: 2
                },
                {
                    id: 2,
                    URL: 'https://www.baidu.com/',
                    title: '222222222222',
                    cover: 'http://www.xmt.com/images/index/NewType1/1.jpg',
                    tag: ['社会'],
                    user: '逻辑思维',
                    Avatar: "http://www.xmt.com/images/index/Avatar/Avatar.jpg",
                    discuss: {name: "评论", URL: "https://www.baidu.com"},
                    cTime: '34分钟前',
                    pic_list: [],
                    show_type: 1,
                },

                {
                    id:3,
                    URL: 'http://www.sina.com.cn/',
                    title: '2222222222222222',
                    pic_list: ['http://www.xmt.com/images/index/NewType2/1.jpg', 'http://www.xmt.com/images/index/NewType2/2.jpg', 'http://www.xmt.com/images/index/NewType2/3.jpg', 'http://www.xmt.com/images/index/NewType2/2.jpg',],
                    tag: ['社会'],
                    user: '逻辑思维',
                    Avatar: "http://www.xmt.com/images/index/Avatar/Avatar.jpg",
                    discuss: {name: "评论", URL: "https://www.baidu.com"},
                    cTime: '34分钟前',
                    show_type: 1,

                },


                {
                    id: 4,
                    URL: 'https://www.baidu.com/',
                    a1title: '2222222222',
                    a2title: '感动瞬间的八张图片，最后一张总理照片莫名戳中泪点感动瞬间的八张图片，最后一张总理照片莫名戳中泪点感动瞬间的八张图片，最后一张总理照片莫名戳中泪点',
                    pic_list: ['http://www.xmt.com/images/index/NewType3/1.jpg'],
                    show_type: 2
                },
                {
                    id: 5,
                    URL: 'https://www.baidu.com/',
                    title: '3333333333333',
                    cover: 'http://www.xmt.com/images/index/NewType1/1.jpg',
                    tag: ['社会'],
                    user: '逻辑思维',
                    Avatar: "http://www.xmt.com/images/index/Avatar/Avatar.jpg",
                    discuss: {name: "评论", URL: "https://www.baidu.com"},
                    cTime: '34分钟前',
                    pic_list: [],
                    show_type: 1,
                },



            ],
            news: [],
            menu: [
                {name: '推荐', id: 1},
                {name: '推荐', id: 2},
                {name: '推荐', id: 3},
                {name: '推荐', id: 4},
                {name: '推荐', id: 5},
                {name: '推荐', id: 6},
                {name: '推荐', id: 7},
                {name: '推荐', id: 8},
                {name: '推荐', id: 9},
                {name: '推荐', id: 10},
                {name: '推荐', id: 11},
                {name: '推荐', id: 12},
                {name: '推荐', id: 13},
                {name: '推荐', id: 14},
                {name: '推荐', id: 15},
                {name: '推荐', id: 16},
                {name: '推荐', id: 17},
                {name: '推荐', id: 18},
                {name: '推荐', id: 19},
                {name: '推荐', id: 20},
                {name: '推荐', id: 21},
                {name: '推荐', id: 25},
                {name: '推荐', id: 26},
                {name: '推荐', id: 27},
                {name: '推荐', id: 28},
                {name: '推荐', id: 29},
                {name: '推荐', id: 30},
                {name: '推荐', id: 31},
                {name: '推荐', id: 32},
                {name: '推荐', id: 33},
                {name: '推荐', id: 34},
                {name: '推荐', id: 35},
                {name: '推荐', id: 36},
                {name: '推荐', id: 37},
            ],
            list:[],
            isActive: false,

            biglist0: [
                {title: "我是大标题",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题1",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题2",url: "http://www.xmt.com/inex.html", id: 0},
            ],
            biglist1: [
                {title: "我是大标题",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题1",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题2",url: "http://www.xmt.com/inex.html", id: 0},
            ],
            biglist2: [
                {title: "我是大标题",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题1",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题2",url: "http://www.xmt.com/inex.html", id: 0},
            ],
            biglist3: [
                {title: "我是大标题",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题1",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题2",url: "http://www.xmt.com/inex.html", id: 0},
            ],
            biglist4: [
                {title: "我是大标题",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题1",url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是小标题2",url: "http://www.xmt.com/inex.html", id: 0},
            ],



            worldtitle: [
                {title: "我是标题1", url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是标题2", url: "http://www.xmt.com/inex.html", id: 1},
            ],
            worldlist1: [
                {name: "我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
            ],
            worldlist2: [
                {name: "我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
            ],
            worldlist3: [
                {pic: "http://www.xmt.com/images/classify/2222.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 0},
                {pic: "http://www.xmt.com/images/classify/2222.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 1},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 2},
            ],
            worldlist4: [
                {title: "英举行背老婆大赛 夫妇齐心协力闯关", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
            ],







            SocietyTitle: [
                {title: "我是标题1", url: "http://www.xmt.com/inex.html", id: 0},
                {title: "我是标题2", url: "http://www.xmt.com/inex.html", id: 1},
                {title: "我是标题3", url: "http://www.xmt.com/inex.html", id: 2},
                {title: "我是标题4", url: "http://www.xmt.com/inex.html", id: 3},
                {title: "我是标题5", url: "http://www.xmt.com/inex.html", id: 4},
            ],
            SocietyList1: [
                {name: "我是标题1的列表,  我是标题1的列表,  我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表,  我是标题1的列表,  我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表,  我是标题1的列表,  我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表,  我是标题1的列表,  我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题1的列表,  我是标题1的列表,  我是标题1的列表", url: "http://www.xmt.com/inex.html", type: 2},


            ],
            SocietyList2: [
                {name: "我是标题2的列表,  我是标题2的列表,  我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表,  我是标题2的列表,  我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表,  我是标题2的列表,  我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表,  我是标题2的列表,  我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题2的列表,  我是标题2的列表,  我是标题2的列表", url: "http://www.xmt.com/inex.html", type: 2},
            ],
            SocietyList3: [
                {name: "我是标题3的列表,  我是标题3的列表,  我是标题3的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题3的列表,  我是标题3的列表,  我是标题3的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题3的列表,  我是标题3的列表,  我是标题3的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题3的列表,  我是标题3的列表,  我是标题3的列表", url: "http://www.xmt.com/inex.html", type: 2},
                {name: "我是标题3的列表,  我是标题3的列表,  我是标题3的列表", url: "http://www.xmt.com/inex.html", type: 2},
            ],
            SocietyList4: [
                {pic: "http://www.xmt.com/images/classify/2222.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 0},
                {pic: "http://www.xmt.com/images/classify/2222.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 1},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 2},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 3},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 4},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 5},
                {pic: "http://www.xmt.com/images/classify/111111.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 6},
            ],
            SocietyList6: [
                {title: "英举行背老婆大赛 夫妇齐心协力闯关", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
            ],
            SocietyList7: [
                {title: "英举行背老婆大赛 夫妇齐心协力闯关", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
                {title: "韩国最美短发女星高俊熙春日写真 性感VS清纯【组图】", id: 1},
            ],

            military:[
                {pic: "http://www.xmt.com/images/classify/2222.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", id: 0},
                {pic: "http://www.xmt.com/images/classify/listnew1.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", from:"",time:"", id: 1},
                {pic: "http://www.xmt.com/images/classify/listnew1.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", from:"",time:"", id: 2},
                {pic: "http://www.xmt.com/images/classify/listnew1.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", from:"",time:"", id: 3},
                {pic: "http://www.xmt.com/images/classify/listnew1.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", from:"",time:"", id: 4},
                {pic: "http://www.xmt.com/images/classify/listnew1.jpeg", title: "福岛核事故去污费已达2.6万亿日元 或还将膨胀", from:"",time:"", id: 5},
                    ],

          image:[
              {pic: "http://www.xmt.com/images/classify/pic1.jpg", title: "",url:"", id: 0},
              {pic: "http://www.xmt.com/images/classify/pic1.jpg", title: "",url:"", id: 1},
              {pic: "http://www.xmt.com/images/classify/pic1.jpg", title: "",url:"", id: 2},
              {pic: "http://www.xmt.com/images/classify/pic1.jpg", title: "",url:"", id: 3},
              {pic: "http://www.xmt.com/images/classify/pic1.jpg", title: "",url:"", id: 4},
              {pic: "http://www.xmt.com/images/classify/pic6.jpg", title: "",url:"", id: 5},
          ]
        },


        ready: function () {
            this.getList(this.cate_id)

        },
        methods: {
            getdata: function () {
                console.log(this.index)
            },
            code:function () {
//              this.list =this.news
            },

            changeType:function (e) {
                console.log(e)
                var id = e.target.dataset.id
                console.log(id)
                this.cate_id = id
                this.list= []
                this.getList(id)
            },

            getList(id) {
                // 获取分类下的数据
//                console.log(this.list)
                //空数组list连接mock
                this.list = this.list.concat(this.mock)
                console.log(this.list)
            },

            next: function () {
                //一下代码是自动刷新↓↓↓↓↓↓↓
                this.getList(this.id)
                var data = this.list
                //console.log(data, 'before')
                //concat() 方法用于连接两个或多个数组。
                data = data.concat(data)
                //console.log(data, 'after')
                this.list = data
            },
        }
    })


</script>

<!--左边浮动侧边栏菜单js-->
<script>
    function show() {
        var more = $('#more-show');
        $('.wchannel-more-layer').toggle(function () {
            more.text() === '更多' ? more.text('收起') : more.text('更多');

        });
    }
</script>


<script src="CarouselJS/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="CarouselJS/easySlider.js"></script>
<script type="text/javascript">
    $(function() {
        $("#slider").easySlider( {
            slideSpeed: 500,
            paginationSpacing: "15px",
            paginationDiameter: "12px",
            paginationPositionFromBottom: "20px",
            slidesClass: ".slides",
            controlsClass: ".controls",
            paginationClass: ".pagination"
        });
    });
</script>





